import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { historySummaryDetails } from 'utils/Api'
import moment from 'utils/moment'
import locale from 'antd/lib/date-picker/locale/zh_CN'
import { DatePicker, Icon } from 'antd'
class Information extends Component {
  constructor() {
    super()
    this.state = {
      startDate: null,
      endDate: null,
      max: '',
      min: '',
      pcpn: '',
      gdu: '',
      gduDegree: '',
      loadding: false,
      reload: false,
      endOpen: false,
    }
  }
  componentDidMount() {
    this.update()
  }
  update = () => {
    this.setState({
      loadding: true,
      reload: false
    })
    const { startDate, endDate } = this.state
    const { landId } = this.props
    const request = startDate ? {
      landId,
      startDate: startDate.format('YYYY/MM/DD'),
      endDate: endDate.format('YYYY/MM/DD')
    } : {
      landId,
    }
    historySummaryDetails(request)
      .then(({ msg, 
        result: {
          gdu,
          max,
          min,
          pcpn,
          startDate,
          endDate,
          gduDegree
        }
      }) => {
        if (msg === '200') {
          this.setState({
            gdu,
            max,
            min,
            pcpn,
            gduDegree,
            startDate: moment(new Date(startDate)),
            endDate: moment(new Date(endDate)),
            loadding: false
          })
        }
      }).catch(err => {
        this.setState({
          loadding: false,
          reload: true
        })
      })

  }
  componentDidUpdate(prevProps, prevState) {
    const { startDate, endDate } = this.state
    if (!prevState.startDate) {
      return
    }
    if (!prevState.endDate.isSame(endDate)) {
      this.update()
      return
    }
  }
  disabledStartDate = (startDate) => {
    const { endDate } = this.state
    if (!startDate || !endDate) {
      return false
    }
    return moment().valueOf() <= startDate.valueOf()
  }
  disabledEndDate = (endDate) => {
    const { startDate } = this.state
    if (!endDate || !startDate) {
      return false
    }
    //moment().subtract(1, 'days').valueOf() <= endDate.valueOf()
    return moment(startDate.valueOf()).add(365, 'days').valueOf() <= endDate.valueOf()
      || startDate.valueOf() >= endDate.valueOf() || moment().subtract(1, 'days').valueOf() <= endDate.valueOf()
  }
  onChange = (field, value) => {
    if (!value) {
      return
    }
    this.setState({
      [field]: value,
    })
  }
  onStartChange = (value) => {
    this.onChange('startDate', value)
  }
  onEndChange = (value) => {
    this.onChange('endDate', value)
  }
  handleStartOpenChange = (open) => {
    if (!open) {
      this.setState({ endOpen: true })
    }
  }

  handleEndOpenChange = (open) => {
    this.setState({ endOpen: open })
  }
  render() {
    const { startDate, endDate, gdu, max, min, pcpn, loadding, reload, endOpen, gduDegree } = this.state
    return <div className='weatherInfo'>
      <div className='datepicker'>
        <div>
          <DatePicker
            disabledDate={this.disabledStartDate}
            format="YYYY/MM/DD"
            value={startDate}
            placeholder="开始日期"
            onChange={this.onStartChange}
            onOpenChange={this.handleStartOpenChange}
            locale={locale}
          />
          <DatePicker
            locale={locale}
            disabledDate={this.disabledEndDate}
            format="YYYY/MM/DD"
            value={endDate}
            placeholder="结束日期"
            onChange={this.onEndChange}
            open={endOpen}
            onOpenChange={this.handleEndOpenChange}
          />
        </div>
      </div>
      <div className='infomation-table'>
        {
          reload && <div className='reload' onClick={() => this.update()}>
            <Icon type="reload" theme="outlined" />
            <div>点击重新加载</div>
          </div>
        }
        {loadding &&  <div className='loading'>
          <Icon type="loading" theme="outlined" />
        </div>}
        <table>
          <tbody>
            <tr>
              <td>累积GDU（°C/°F）</td>
              <td>{gduDegree}/{gdu}</td>
            </tr>
            <tr>
              <td>{'最高温>32°C（90°F）天数'}</td>
              <td>{max}</td>
            </tr>
            <tr>
              <td>{'最低温>21°C（70°F）天数'}</td>
              <td>{min}</td>
            </tr>
            <tr>
              <td>降水量总和（mm/in.）</td>
              <td>{Math.round(pcpn)}/{Math.round(pcpn * 0.0393701 * 100)/100}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  }
}

Information.propTypes = {
  landId: PropTypes.string,
}

export default Information